Istražite heksagonalnu i čistu arhitekturu za izgradnju frontend aplikacija koje se lako održavaju, skaliraju i testiraju. Naučite njihova načela, prednosti i praktične strategije implementacije.
Frontend arhitektura: Heksagonalna i čista arhitektura za skalabilne aplikacije
Kako frontend aplikacije postaju sve složenije, dobro definirana arhitektura postaje ključna za održivost, mogućnost testiranja i skalabilnost. Dva popularna arhitektonska obrasca koja rješavaju ove probleme su heksagonalna arhitektura (poznata i kao portovi i adapteri) i čista arhitektura. Iako potječu iz svijeta pozadinskih sustava (backend), ova se načela mogu učinkovito primijeniti na frontend razvoj kako bi se stvorila robusna i prilagodljiva korisnička sučelja.
Što je frontend arhitektura?
Frontend arhitektura definira strukturu, organizaciju i interakcije različitih komponenti unutar frontend aplikacije. Pruža nacrt za način na koji se aplikacija gradi, održava i skalira. Dobra frontend arhitektura promiče:
- Održivost: Lakše razumijevanje, mijenjanje i ispravljanje grešaka u kodu.
- Mogućnost testiranja: Olakšava pisanje jediničnih i integracijskih testova.
- Skalabilnost: Omogućuje aplikaciji da se nosi s rastućom složenošću i opterećenjem korisnika.
- Ponovna iskoristivost: Promiče ponovnu upotrebu koda u različitim dijelovima aplikacije.
- Fleksibilnost: Prilagođava se promjenjivim zahtjevima i novim tehnologijama.
Bez jasne arhitekture, frontend projekti mogu brzo postati monolitni i teški za upravljanje, što dovodi do povećanih troškova razvoja i smanjene agilnosti.
Uvod u heksagonalnu arhitekturu
Heksagonalna arhitektura, koju je predložio Alistair Cockburn, ima za cilj odvojiti temeljnu poslovnu logiku aplikacije od vanjskih ovisnosti, poput baza podataka, UI okvira i API-ja trećih strana. To postiže kroz koncept portova i adaptera.
Ključni koncepti heksagonalne arhitekture:
- Jezgra (domena): Sadrži poslovnu logiku i slučajeve korištenja aplikacije. Neovisna je o bilo kakvim vanjskim okvirima ili tehnologijama.
- Portovi: Sučelja koja definiraju kako jezgra komunicira s vanjskim svijetom. Predstavljaju ulazne i izlazne granice jezgre.
- Adapteri: Implementacije portova koje povezuju jezgru s određenim vanjskim sustavima. Postoje dvije vrste adaptera:
- Pokretački adapteri (primarni adapteri): Pokreću interakcije s jezgrom. Primjeri uključuju UI komponente, sučelja naredbenog retka ili druge aplikacije.
- Pokretani adapteri (sekundarni adapteri): Jezgra ih poziva za interakciju s vanjskim sustavima. Primjeri uključuju baze podataka, API-je ili datotečne sustave.
Jezgra ne zna ništa o specifičnim adapterima. Ona s njima komunicira samo putem portova. Ovo razdvajanje omogućuje vam jednostavnu zamjenu različitih adaptera bez utjecaja na temeljnu logiku. Na primjer, možete se prebaciti s jednog UI okvira (npr. React) na drugi (npr. Vue.js) jednostavnom zamjenom pokretačkog adaptera.
Prednosti heksagonalne arhitekture:
- Poboljšana mogućnost testiranja: Temeljna poslovna logika može se lako testirati u izolaciji, bez oslanjanja na vanjske ovisnosti. Možete koristiti lažne (mock) adaptere za simulaciju ponašanja vanjskih sustava.
- Povećana održivost: Promjene na vanjskim sustavima imaju minimalan utjecaj na temeljnu logiku. To olakšava održavanje i razvoj aplikacije tijekom vremena.
- Veća fleksibilnost: Aplikaciju možete lako prilagoditi novim tehnologijama i zahtjevima dodavanjem ili zamjenom adaptera.
- Poboljšana ponovna iskoristivost: Temeljna poslovna logika može se ponovno koristiti u različitim kontekstima povezivanjem s različitim adapterima.
Uvod u čistu arhitekturu
Čista arhitektura, koju je popularizirao Robert C. Martin (Uncle Bob), još je jedan arhitektonski obrazac koji naglašava odvajanje odgovornosti (separation of concerns) i razdvajanje (decoupling). Fokusira se na stvaranje sustava koji je neovisan o okvirima, bazama podataka, korisničkom sučelju i bilo kojoj vanjskoj agenciji.
Ključni koncepti čiste arhitekture:
Čista arhitektura organizira aplikaciju u koncentrične slojeve, s najapstraktnijim i ponovno iskoristivim kodom u središtu te najkonkretnijim i tehnološki specifičnim kodom na vanjskim slojevima.
- Entiteti: Predstavljaju temeljne poslovne objekte i pravila aplikacije. Neovisni su o bilo kakvim vanjskim sustavima.
- Slučajevi korištenja (Use Cases): Definiraju poslovnu logiku aplikacije i kako korisnici komuniciraju sa sustavom. Oni orkestriraju entitete za obavljanje određenih zadataka.
- Sučeljni adapteri (Interface Adapters): Pretvaraju podatke između slučajeva korištenja i vanjskih sustava. Ovaj sloj uključuje prezentere, kontrolere i pristupnike (gateways).
- Okviri i pokretači (Frameworks and Drivers): Najudaljeniji sloj koji sadrži UI okvir, bazu podataka i druge vanjske tehnologije.
Pravilo ovisnosti u čistoj arhitekturi kaže da vanjski slojevi mogu ovisiti o unutarnjim slojevima, ali unutarnji slojevi ne smiju ovisiti o vanjskim slojevima. To osigurava da je temeljna poslovna logika neovisna o bilo kakvim vanjskim okvirima ili tehnologijama.
Prednosti čiste arhitekture:
- Neovisnost o okvirima: Arhitektura se ne oslanja na postojanje neke biblioteke softvera bogatog značajkama. To vam omogućuje da koristite okvire kao alate, umjesto da budete prisiljeni staviti svoj sustav u njihova ograničenja.
- Mogućnost testiranja: Poslovna pravila mogu se testirati bez korisničkog sučelja, baze podataka, web poslužitelja ili bilo kojeg drugog vanjskog elementa.
- Neovisnost o korisničkom sučelju: Korisničko sučelje može se lako promijeniti, bez mijenjanja ostatka sustava. Web sučelje može se zamijeniti konzolnim sučeljem, bez mijenjanja poslovnih pravila.
- Neovisnost o bazi podataka: Možete zamijeniti Oracle ili SQL Server za Mongo, BigTable, CouchDB ili nešto drugo. Vaša poslovna pravila nisu vezana za bazu podataka.
- Neovisnost o bilo kojoj vanjskoj agenciji: Zapravo, vaša poslovna pravila jednostavno ne znaju *ništa* o vanjskom svijetu.
Primjena heksagonalne i čiste arhitekture na frontend razvoj
Iako se heksagonalna i čista arhitektura često povezuju s pozadinskim razvojem, njihova se načela mogu učinkovito primijeniti na frontend aplikacije kako bi se poboljšala njihova arhitektura i održivost. Evo kako:
1. Identificirajte jezgru (domenu)
Prvi korak je identificirati temeljnu poslovnu logiku vaše frontend aplikacije. To uključuje entitete, slučajeve korištenja i poslovna pravila koja su neovisna o UI okviru ili bilo kakvim vanjskim API-jima. Na primjer, u e-commerce aplikaciji, jezgra bi mogla uključivati logiku za upravljanje proizvodima, košaricom i narudžbama.
Primjer: U aplikaciji za upravljanje zadacima, jezgra domene mogla bi se sastojati od:
- Entiteti: Zadatak, Projekt, Korisnik
- Slučajevi korištenja: StvoriZadatak, AžurirajZadatak, DodijeliZadatak, DovršiZadatak, PopisZadataka
- Poslovna pravila: Zadatak mora imati naslov, zadatak se ne može dodijeliti korisniku koji nije član projekta.
2. Definirajte portove i adaptere (heksagonalna arhitektura) ili slojeve (čista arhitektura)
Zatim definirajte portove i adaptere (heksagonalna arhitektura) ili slojeve (čista arhitektura) koji odvajaju jezgru od vanjskih sustava. U frontend aplikaciji, to bi moglo uključivati:
- UI komponente (Pokretački adapteri / Okviri i pokretači): React, Vue.js, Angular komponente koje komuniciraju s korisnikom.
- API klijenti (Pokretani adapteri / Sučeljni adapteri): Servisi koji šalju zahtjeve pozadinskim API-jima.
- Spremnici podataka (Pokretani adapteri / Sučeljni adapteri): Lokalna pohrana, IndexedDB ili drugi mehanizmi za pohranu podataka.
- Upravljanje stanjem (Sučeljni adapteri): Redux, Vuex ili druge biblioteke za upravljanje stanjem.
Primjer korištenja heksagonalne arhitekture:
- Jezgra: Logika za upravljanje zadacima (entiteti, slučajevi korištenja, poslovna pravila).
- Portovi:
TaskService(definira metode za stvaranje, ažuriranje i dohvaćanje zadataka). - Pokretački adapter: React komponente koje koriste
TaskServiceza interakciju s jezgrom. - Pokretani adapter: API klijent koji implementira
TaskServicei šalje zahtjeve pozadinskom API-ju.
Primjer korištenja čiste arhitekture:
- Entiteti: Zadatak, Projekt, Korisnik (čisti JavaScript objekti).
- Slučajevi korištenja: CreateTaskUseCase, UpdateTaskUseCase (orkestriraju entitete).
- Sučeljni adapteri:
- Kontroleri: Upravljaju korisničkim unosom iz korisničkog sučelja.
- Prezenteri: Formatiraju podatke za prikaz u korisničkom sučelju.
- Pristupnici (Gateways): Komuniciraju s API klijentom.
- Okviri i pokretači: React komponente, API klijent (axios, fetch).
3. Implementirajte adaptere (heksagonalna arhitektura) ili slojeve (čista arhitektura)
Sada implementirajte adaptere ili slojeve koji povezuju jezgru s vanjskim sustavima. Pobrinite se da su adapteri ili slojevi neovisni o jezgri i da jezgra s njima komunicira samo putem portova ili sučelja. To vam omogućuje jednostavnu zamjenu različitih adaptera ili slojeva bez utjecaja na temeljnu logiku.
Primjer (heksagonalna arhitektura):
// Port TaskService
interface TaskService {
createTask(taskData: TaskData): Promise;
updateTask(taskId: string, taskData: TaskData): Promise;
getTask(taskId: string): Promise;
}
// Adapter API klijenta
class ApiTaskService implements TaskService {
async createTask(taskData: TaskData): Promise {
// Pošalji API zahtjev za stvaranje zadatka
}
async updateTask(taskId: string, taskData: TaskData): Promise {
// Pošalji API zahtjev za ažuriranje zadatka
}
async getTask(taskId: string): Promise {
// Pošalji API zahtjev za dohvaćanje zadatka
}
}
// Adapter React komponente
function TaskList() {
const taskService: TaskService = new ApiTaskService();
const handleCreateTask = async (taskData: TaskData) => {
await taskService.createTask(taskData);
// Ažuriraj popis zadataka
};
// ...
}
Primjer (čista arhitektura):
// Entiteti
class Task {
constructor(public id: string, public title: string, public description: string) {}
}
// Slučaj korištenja
class CreateTaskUseCase {
constructor(private taskGateway: TaskGateway) {}
async execute(title: string, description: string): Promise {
const task = new Task(generateId(), title, description);
await this.taskGateway.create(task);
return task;
}
}
// Sučeljni adapteri - Pristupnik (Gateway)
interface TaskGateway {
create(task: Task): Promise;
}
class ApiTaskGateway implements TaskGateway {
async create(task: Task): Promise {
// Pošalji API zahtjev za stvaranje zadatka
}
}
// Sučeljni adapteri - Kontroler
class TaskController {
constructor(private createTaskUseCase: CreateTaskUseCase) {}
async createTask(req: Request, res: Response) {
const { title, description } = req.body;
const task = await this.createTaskUseCase.execute(title, description);
res.json(task);
}
}
// Okviri i pokretači - React komponenta
function TaskForm() {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const apiTaskGateway = new ApiTaskGateway();
const createTaskUseCase = new CreateTaskUseCase(apiTaskGateway);
const taskController = new TaskController(createTaskUseCase);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
await taskController.createTask({ body: { title, description } } as Request, { json: (data: any) => console.log(data) } as Response);
};
return (